{% extends 'base.html' %}

{% block header_js %}
    <title>attack-overview</title>
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
    <style type="text/css">
        .span{
            font-size:15px;
            color: #00efb2;
        }
        .fontsize{
            font-size:20px;
        }
    </style>
{% endblock %}

{% block navname %}attack{% endblock %}
{% block navSon %}overview{% endblock %}

{% block content %}
<div class="form-group">
    <label class="col-sm-12 control-label" style="margin: 30px"><b style="font-size:20px;text-align: right;">ATT&CK数据总览</b></label>
</div>
<div class="content-wrapper">
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="col-10" style="display: inline-block;margin-bottom: 80px;">
                        <div class="btn-group">
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ overview }}</span>
                              <br>
                              All
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Tactics }}</span>
                              <br>
                              战术
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Techniques }}</span>
                              <br>
                              技术
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ SubTechniques }}</span>
                              <br>
                              子技术
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Mitigations }}</span>
                              <br>
                              缓解措施
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Groups }}</span>
                              <br>
                              组织
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Software }}</span>
                              <br>
                              软件
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Datasource }}</span>
                              <br>
                              数据资源
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ DatasourceComponent }}</span>
                              <br>
                              数据组件
                            </label>
                            <label class="btn btn-default text-center fontsize">
                              <span class="text span">{{ Campaign }}</span>
                              <br>
                              战役
                            </label>
                        </div>
                      <button type="button" class="btn btn-block btn-outline-secondary float-right " data-toggle="modal" data-target="#myModal1" style="font-size:20px;width:130px; margin: 20px">
                          批量导入
                      </button>
                    </div>

                    <div class="col-md-10">
                        <!-- Bar chart -->
                        <div class="card card-primary card-outline">
                          <div class="card-header">
                            <h3 class="card-title">
                              <i class="far fa-chart-bar"></i>
                              ATT&CK各模块数据统计表
                            </h3>
                          </div>
                          <div class="card-body">
                            <div id="bar-chart" style="height: 300px;"></div>
                          </div>
                          <!-- /.card-body-->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
{#        导入弹出#}
<div class="modal fade" id="myModal1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel" style="font-size: 25px">导入数据</h4>

                <div class="box box-primary">
                    <div class="row">
                        <form id="uploadForm" class="form-horizontal" enctype="multipart/form-data" method="post">
                            {% csrf_token %}
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-6 control-label">上传Excel</label>
                                    <div class="col-sm-10">
                                        <input type="file" class="form-control" style="height: 48px;" name="excel" id="excel" accept=".xlsx" required />
                                    </div>
                                </div>
                                <br/>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label"><b style="font-size:10px;text-align: right;margin: 10px">提示:导入数据需要一定时间请勿重复操作！</b></label>
                                </div>
                            </div>
                            <div class="modal-footer" style="width:50%">
                                <button type="submit" id="submit_data" class="btn btn-primary">提交</button>
                                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
{% endblock %}

{% block footer_js %}
<script src="/static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="/static/plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="/static/plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="/static/plugins/flot/plugins/jquery.flot.pie.js"></script>
<script src="/static/js/jquery.form.js"></script>
<script src="/static/js/bootstrap-growl.js"></script>
<script>
$.get("/attack/overview/data/", function (data) {
        if (data.success) {
            console.log(data.data.overview)
            var bar_data = {
                  data : [[1,data.data.Tactics], [2,data.data.Techniques], [3,data.data.SubTechniques],
                      [4,data.data.Mitigations], [5,data.data.Groups], [6,data.data.Software], [7,data.data.Datasource],
                      [8,data.data.DatasourceComponent], [9,data.data.Campaign]],
                  bars: { show: true }
                }
            $.plot('#bar-chart', [bar_data], {
              grid  : {
                borderWidth: 1,
                borderColor: '#f3f3f3',
                tickColor  : '#f3f3f3'
              },
              series: {
                 bars: {
                  show: true, barWidth: 0.5, align: 'center',
                },
              },
              colors: ['#3c5cbc'],
              xaxis : {
                ticks: [[1,'战术'], [2,'技术'], [3,'子技术'], [4,'缓解措施'], [5,'组织'], [6,'软件'],[7,'数据资源'],[8,'数据组件'],[9,'战役']]
              }
            })
        } else {
            $.growlService("数据请求失败", {type: "danger"})
        }
    })
</script>
<script>
    //上传文件
    $("#uploadForm").ajaxForm({
        type: "post",
        url: "/attack/overview/import/data/",
        success: function (data) {
            //判断文件格式
            try {
                var data1 = JSON.parse(data);
                if (data1['error'] == 'not_xlsx') {
                    alert("请检查文件格式！");
                }
            }
            catch (e) {
                if (data.success) {
                    // location.href = "#";
                    $.growlService("上传成功", {type: "success"});
                    setTimeout(() => {
                        window.location.reload()
                    }, 1000);
                }
                else {
                    $.growlService("上传文件有误", {type: "danger"})
                }
            }
        }
    });
    $('#submit_data').on('click', function (){
        $.growlService("文件正在上传", {type: "warning"});
    });
</script>
{% endblock %}
